<template>
        <mian-layout style="background:#fff">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                
                <el-form-item label="用户头像" prop="headUrl">
                     <my-upload-file v-model='ruleForm.headUrl' :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="用户ID" prop="backgroundUrl">
                  <el-input v-model="ruleForm.userId" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="昵称" prop="nick">
                  <el-input v-model="ruleForm.nick" placeholder="艺术家昵称" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="ruleForm.phone" placeholder="手机号码"  style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="积分" prop="points">
                  <el-input v-model="ruleForm.points" placeholder="积分" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="创建时间" prop="createTime">
                  <el-input v-model="ruleForm.createTime" placeholder="创建时间" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="推荐人手机号码" prop="recommendPhone">
                  <el-input v-model="ruleForm.recommendPhone" placeholder="推荐人手机号码" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item>
                      <template v-if="onlyLook==1">
                          <my-back type="info">返回</my-back>
                          <!-- <el-button type="success" icon="el-icon-edit" @click="onlyLook=2">修改</el-button> -->
                          <el-button type="warning" icon="el-icon-coordinate" @click="transformArtist">转为艺术家</el-button>
                      </template>
                      <template v-else>
                          <el-button type="primary" icon="el-icon-check" @click="handleSave('ruleForm')">保存</el-button>
                          <el-button icon="el-icon-close" @click="$router.back()">取消</el-button>
                      </template>
                </el-form-item>
            </el-form>
        </mian-layout>
</template>

<script>
import {
  addArtist,
  get_user_detail,
  edit_artist_data,
  change_register_user
} from '@/api/arApi'
import myUploadFile from '@/components/public/myUploadFile.vue'
import myBack from '@/components/public/myBack.vue'
import {mergeObject} from '@/utils/index'
export default {
  name: '',
  components:{
    myUploadFile,
    myBack
  },
  data() {
    return {
      ruleForm: {
        userId:'',
        headUrl:'',
        introduce:'',
        phone:'',
        nick:'',
        points:0,
        createTime:'',
        recommendPhone:'-'
      },
      checked:false,
      rules: {},
      id:'',
      onlyLook:''
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    if(this.id){  // 编辑、查看
      const res = await get_user_detail(this.id)
      if(res.success){
        this.ruleForm = mergeObject(this.ruleForm,res.data)
      }
    }
  },
  methods: {
    // 确定
    handleSave(formName) {

        if(this.id) {
          edit_artist_data({artistId:this.id,...this.ruleForm}).then(res=>{
            if(res.success){
                this.$message.success('修改成功！')
                this.$router.back()
              }else{
                this.$message.error("修改失败")
              }
          })
        }else{
          addArtist(this.ruleForm).then(res=>{
            if(res.success){
              this.$message.success('新增成功！')
              this.$router.back()
            }else{
              //this.$message.error("新增失败")
            }
          })
        }
    },
    transformArtist(){
        this.$confirm('确定转化为艺术家吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
            const res = await change_register_user({userId:this.id})
            if(res.success){
                this.$message.success('操作成功')
            }else{
               // this.$message.error('操作失败');
            }
        }).catch(() => {});
    }
  }
}
</script>

<style lang="scss" scoped>
  .uploadimgbox{
    display: flex;
    .upItem{
      p{
        color: #999;
      }
      &+.upItem{
        margin: 0 0 0 103px;
      }
    }
  }
</style>


